/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

.avatar-size(@size) {
  @diameter: 'avatar-diameter-@{size}';
  @initials: 'avatar-initials-@{size}';
  .square(@@diameter);
  .avatar-initials {
    font-size: @@initials;
    line-height: @@diameter;
  }
}

participant-avatar {
  position: relative;
  display: inline-block;
  transform: translateZ(0);
  user-select: none;
  cursor: pointer;

  &.avatar-no-border {
    .avatar-border {
      display: none;
    }
  }

  &.avatar-no-badge {
    .avatar-badge {
      display: none;
    }
  }

  &.avatar-no-filter {
    .avatar-image {
      filter: none !important;
    }
  }

  .avatar-border {
    border: 1px solid fade(#000, 8%);
  }

  .participant-avatar {
    .full-screen;
    overflow: hidden;
    & > div {
      .full-screen;
    }

    &.pending,
    &.blocked,
    &.unknown,
    &.ignored {
      .avatar-image {
        filter: grayscale(100%);
      }

      .avatar-border {
        display: none;
      }
    }

    &.selected,
    &.pending,
    &.blocked {
      .avatar-badge {
        background-color: fade(#000, 56%);
      }
    }

    &.selected {
      .avatar-badge::before {
        .icon-mixin('\e102', @icon-size-sm); // icon-check
      }
    }

    &.pending {
      .avatar-badge::before {
        .icon-mixin('\e165', @icon-size-sm); // icon-pending
      }
    }

    &.blocked {
      .avatar-badge::before {
        .icon-mixin('\e104', @icon-size-sm); // icon-block
      }
    }

    &.camera {
      .avatar-badge::before {
        .icon-mixin('\e143', @icon-size-lg); // icon-camera
      }
    }

    &.unknown {
      .avatar-background {
        background-color: @w-gray;
      }
    }
  }

  &.avatar-xl {
    .avatar-size(xl);
  }

  &.avatar-l {
    .avatar-size(l);
  }

  &.avatar-m {
    .avatar-size(m);
  }

  &.avatar-s {
    .avatar-size(s);
  }

  &.avatar-xs {
    .avatar-size(xs);
  }

  &.avatar-xxs {
    .avatar-size(xxs);
  }

  &.avatar-lg,
  &.avatar-md {
    .avatar-border {
      display: none;
    }
  }

  &.avatar-xs,
  &.avatar-xxs {
    .avatar-image,
    .avatar-service-placeholder {
      .no-transition();
    }

    .avatar-badge {
      display: none;
    }
  }

  .avatar-badge {
    .flex-center;
    color: #fff;
  }

  .avatar-initials {
    .text-center;
    user-select: none;
    color: #fff;
  }

  .avatar-background {
    background-color: currentColor;
    transform: scale(0.9916);
  }

  .avatar-image {
    transform: scale(0.88);
    opacity: 0;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  &.avatar-loading-transition {
    .avatar-initials,
    .avatar-service-placeholder {
      transition: opacity @animation-timing-faster @ease-in-quart;
    }

    .avatar-image {
      transition: all @animation-timing-slow @ease-out-quart @animation-timing-faster;
    }
  }

  &.avatar-image-loaded {
    .avatar-initials,
    .avatar-service-placeholder {
      opacity: 0;
    }

    .avatar-image {
      transform: scale(1);
      opacity: 1;
    }
  }

  .avatar-service-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;

    & > svg {
      width: 60%;

      & > path {
        fill: fade(@graphite-dark, 20%);
      }
    }
  }

  &.service-avatar {
    &,
    .avatar-border,
    .avatar-background,
    .avatar-image > img {
      border-radius: 15%;
    }
  }

  &.user-avatar {
    &,
    .avatar-border,
    .avatar-background,
    .avatar-badge,
    .avatar-image > img {
      border-radius: 50%;
    }
  }
}

.avatar-halo {
  .flex-center;
  .square(36px);

  &.avatar-halo-active {
    .accent-border-color;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
  }
}
.avatar-temporary-guest-border {
  position: absolute;
}
